<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>宠物信息管理 - 宠物家政服务</title>
    <link rel="stylesheet" href="styles/main.css">
    <link rel="stylesheet" href="styles/pets.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
</head>
<body>
    <header class="header">
        <div class="container">
            <div class="logo">
                <i class="fas fa-paw"></i>
                <span>宠物家政</span>
            </div>
            <nav class="nav">
                <a href="index.html" class="nav-link">首页</a>
                <a href="services.html" class="nav-link">服务预约</a>
                <a href="orders.html" class="nav-link">我的订单</a>
                <a href="profile.html" class="nav-link">个人中心</a>
            </nav>
            <div class="user-actions">
                <a href="pets.html" class="nav-link active">
                    <i class="fas fa-dog"></i> 我的宠物
                </a>
                <span class="user-name">张三</span>
            </div>
        </div>
    </header>

    <main class="main">
        <div class="container">
            <div class="pets-header">
                <h1>我的宠物</h1>
                <button class="btn btn-primary" onclick="showAddPetForm()">
                    <i class="fas fa-plus"></i> 添加宠物
                </button>
            </div>

            <div class="pets-grid">
                <!-- 宠物卡片示例 -->
                <div class="pet-card">
                    <div class="pet-avatar">
                        <img src="images/pet1.jpg" alt="旺财">
                        <span class="pet-type dog">狗狗</span>
                    </div>
                    <div class="pet-info">
                        <h3>旺财</h3>
                        <p><i class="fas fa-venus"></i> 雌性</p>
                        <p><i class="fas fa-birthday-cake"></i> 2岁</p>
                        <p><i class="fas fa-weight"></i> 5.2kg</p>
                    </div>
                    <div class="pet-actions">
                        <button class="btn btn-outline" onclick="editPet(1)">
                            <i class="fas fa-edit"></i> 编辑
                        </button>
                        <button class="btn btn-danger" onclick="deletePet(1)">
                            <i class="fas fa-trash"></i> 删除
                        </button>
                    </div>
                </div>

                <div class="pet-card">
                    <div class="pet-avatar">
                        <img src="images/pet2.jpg" alt="咪咪">
                        <span class="pet-type cat">猫咪</span>
                    </div>
                    <div class="pet-info">
                        <h3>咪咪</h3>
                        <p><i class="fas fa-mars"></i> 雄性</p>
                        <p><i class="fas fa-birthday-cake"></i> 1岁</p>
                        <p><i class="fas fa-weight"></i> 3.8kg</p>
                    </div>
                    <div class="pet-actions">
                        <button class="btn btn-outline" onclick="editPet(2)">
                            <i class="fas fa-edit"></i> 编辑
                        </button>
                        <button class="btn btn-danger" onclick="deletePet(2)">
                            <i class="fas fa-trash"></i> 删除
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 添加/编辑宠物表单弹窗 -->
        <div class="modal" id="petFormModal">
            <div class="modal-content">
                <div class="modal-header">
                    <h2>添加宠物</h2>
                    <button class="close-btn" onclick="closePetForm()">×</button>
                </div>
                <form id="petForm" onsubmit="savePet(event)">
                    <div class="form-group">
                        <label>宠物名称</label>
                        <input type="text" name="name" required>
                    </div>
                    <div class="form-group">
                        <label>宠物类型</label>
                        <select name="type" required>
                            <option value="dog">狗狗</option>
                            <option value="cat">猫咪</option>
                            <option value="other">其他</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>性别</label>
                        <div class="radio-group">
                            <label>
                                <input type="radio" name="gender" value="male" required>
                                雄性
                            </label>
                            <label>
                                <input type="radio" name="gender" value="female" required>
                                雌性
                            </label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label>年龄</label>
                        <input type="number" name="age" min="0" step="0.1" required>
                    </div>
                    <div class="form-group">
                        <label>体重(kg)</label>
                        <input type="number" name="weight" min="0" step="0.1" required>
                    </div>
                    <div class="form-group">
                        <label>照片</label>
                        <input type="file" name="photo" accept="image/*">
                    </div>
                    <div class="form-group">
                        <label>备注</label>
                        <textarea name="notes" rows="3"></textarea>
                    </div>
                    <div class="form-actions">
                        <button type="button" class="btn btn-outline" onclick="closePetForm()">取消</button>
                        <button type="submit" class="btn btn-primary">保存</button>
                    </div>
                </form>
            </div>
        </div>
    </main>

    <script src="https://cdn.jsdelivr.net/npm/axios@1.6.0/dist/axios.min.js"></script>
    <script src="js/api.js"></script>
    <script>
        // 加载宠物列表并渲染
        async function loadPets() {
            try {
                const res = await petHouseAPI.pets.getAll();
                const pets = res.data || [];
                const grid = document.querySelector('.pets-grid');
                if (pets.length === 0) {
                    grid.innerHTML = '<p>暂无宠物，请添加。</p>';
                    return;
                }
                grid.innerHTML = pets.map(pet => `
                    <div class="pet-card">
                        <div class="pet-avatar">
                            <img src="${pet.photoUrls ? pet.photoUrls.split(',')[0] : 'images/pet1.jpg'}" alt="${pet.name}">
                            <span class="pet-type ${pet.type === '狗狗' || pet.type === 'dog' ? 'dog' : (pet.type === '猫咪' || pet.type === 'cat' ? 'cat' : 'other')}">${pet.type}</span>
                        </div>
                        <div class="pet-info">
                            <h3>${pet.name}</h3>
                            <p><i class="fas fa-${pet.gender === 1 ? 'mars' : 'venus'}"></i> ${pet.gender === 1 ? '雄性' : '雌性'}</p>
                            <p><i class="fas fa-birthday-cake"></i> ${pet.age}岁</p>
                            <p><i class="fas fa-weight"></i> ${pet.weight || '-'}kg</p>
                        </div>
                        <div class="pet-actions">
                            <button class="btn btn-outline" onclick="editPet(${pet.id})">
                                <i class="fas fa-edit"></i> 编辑
                            </button>
                            <button class="btn btn-danger" onclick="deletePet(${pet.id})">
                                <i class="fas fa-trash"></i> 删除
                            </button>
                        </div>
                    </div>
                `).join('');
            } catch (e) {
                document.querySelector('.pets-grid').innerHTML = '<p>加载失败</p>';
            }
        }
        // 页面加载时自动刷新
        document.addEventListener('DOMContentLoaded', loadPets);

        // 显示添加宠物表单
        function showAddPetForm() {
            document.getElementById('petFormModal').style.display = 'flex';
            document.querySelector('.modal-header h2').textContent = '添加宠物';
            document.getElementById('petForm').reset();
            document.getElementById('petForm').dataset.editId = '';
        }
        // 显示编辑宠物表单（未实现）
        function editPet(petId) {
            alert('编辑功能暂未实现');
        }
        // 关闭表单
        function closePetForm() {
            document.getElementById('petFormModal').style.display = 'none';
        }
        // 保存宠物信息
        async function savePet(event) {
            event.preventDefault();
            const form = event.target;
            const formData = new FormData(form);
            const name = formData.get('name');
            const type = formData.get('type');
            const gender = formData.get('gender') === 'male' ? 1 : 2;
            const age = Number(formData.get('age'));
            const weight = Number(formData.get('weight'));
            let photoUrls = '';
            const photoFile = formData.get('photo');
            if (photoFile && photoFile.size > 0) {
                // 上传图片，假设有 petHouseAPI.pets.uploadPhoto
                // 这里只做演示，实际可用 petHouseAPI.upload.image
                try {
                    const uploadRes = await petHouseAPI.upload.image(photoFile);
                    photoUrls = uploadRes.data;
                } catch (e) {
                    alert('图片上传失败');
                    return;
                }
            }
            const notes = formData.get('notes');
            try {
                await petHouseAPI.pets.add({
                    name,
                    type,
                    breed: '',
                    gender,
                    age,
                    weight,
                    photoUrls
                });
                alert('添加成功');
                closePetForm();
                loadPets();
            } catch (e) {
                alert('添加失败');
            }
        }
        // 删除宠物
        async function deletePet(petId) {
            if (!confirm('确定要删除这个宠物吗？')) return;
            try {
                await petHouseAPI.pets.delete(petId);
                alert('删除成功');
                loadPets();
            } catch (e) {
                alert('删除失败');
            }
        }
    </script>
</body>
</html> 